<template>
	
	<view>
		
		<view class="flexView">
			<view class="scrollView">
				
				<view class="head-read">
					<view class="flex">
						<view class="flex-box"></view>
					</view>
				</view>
			
				<view class="white-box">
					<view class="tx">
						<view class="tx-grid">
							<view class="tx-grid-text">
								<view class="title">巡查范围</view>
								<view class="money">
									<text>Y286 敏新桥-高仓</text>
								</view>
							</view>
						</view>
					</view>
					
					<view class="palace palace-one">
						<view class="palace-grid">
							<view class="palace-grid-text">
								<view class="palace-grid-text-data">
									<text>6</text>
									<text class="palace-grid-text-data-b">条</text>
								</view>
								<view class="palace-grid-text-name">情况上报</view>
							</view>
						</view>
						<view class="palace-grid">
							<view class="palace-grid-text">
								<view class="palace-grid-text-data">
									<text>31</text>
									<text class="palace-grid-text-data-b">次</text>
								</view>
								<view class="palace-grid-text-name">签到</view>
							</view>
						</view>
					</view>
				</view>
				
			</view>
		</view>
		
		<view class="uni-padding-wrap uni-common-mt">
		      <button type="primary" class="button-sp-area" plain="true" @click="lgout">切换线路</button>     		
		</view>
		
		<uni-list :border="false">
			<uni-list-item :disabled="true" itle="" rightText="" />
		</uni-list>
		
		<view class="example-body">
			<uni-grid :column="2" :show-border="false" :square="false">
				<uni-grid-item v-if="index < 6" v-for="(item ,index) in list" :index="index" :key="index">
					<view class="grid-item-box">
						<image class="image" :src="item.url" mode="aspectFill" @click="gridClick(item.id)"/>
						<text class="text">{{item.text}}</text>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>
		
	</view>
</template>

<script>
	import HmHeadPortraitCard from '@/components/hm-head-portrait-card/index.vue'

	export default {
		components: { HmHeadPortraitCard },
		data() {
			return {
				list: [{
						url: '/static/images/grid/qiandao.png',
						text: '签到',
						id: 1
					},
					{
						url: '/static/images/grid/shangbao.png',
						text: '路巡上报',
						id: 2
					},
					{
						url: '/static/images/grid/gongdan.png',
						text: '工单列表',
						id: 3
					},
					{
						url: '/static/images/grid/huizong.png',
						text: '情况汇总',
						id: 4
					}
				],
				options: {
				          actionBg:
				            '/static/hm-head-portrait-card/images/img_25814_0_0.png',
				          avator:
				            '/static/hm-head-portrait-card/images/img_25814_0_1.png',
				          name: '@李莉儿',
				          info: '旅行社代理人',
				          num: '1570',
				          num2: '2570',
				          num3: '230',
				          fans: '粉丝',
				          article: '文章',
				          attention: '关注'
				}
			}
		},
		onLoad() {
		  
		},
		onPullDownRefresh() { //下拉刷新
		        setTimeout (() => {
		            uni.stopPullDownRefresh();
		        }, 1000);
		},
		methods: {
			gridClick(id){
			    if(1 == id){ this.$to.jumpTo('/signin/signin') }
			    if(2 == id){ this.$to.jumpTo('/workbench/roadTourReport') }
			    if(3 == id){ this.$to.jumpTo('/my/myupdate') }
			    if(4 == id){ this.$to.jumpTo('/my/myupdate') }
				
			},
			onCick: function(e) {
			     console.log('onClick');
			},
			lgout(){ //切换线路
			
			}
		}
	}
</script>

<style lang="scss" scoped>
	

	.button-sp-area{
		margin: 0 auto;
		width: 60%;
	// 	background-color:#ff8440
	}
	
	.image {
		width: 95rpx;
		height: 95rpx;
	}
	
	.text_new{
		font-size: 60rpx;
	}
	.text {
		font-size: 30rpx;
		margin-top: 10rpx;
	}
	
	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
	}
	
	.grid-dynamic-box {
		margin-bottom: 15px;
	}
	
	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}
	
	.grid-dot {
		position: absolute;
		top: 5px;
		right: 15px;
	}
	.swiper {
		height: 420px;
	}
	
	page {
		background-color: #fff;
	}
	
	.top {
		margin-top: 20rpx;
	}
	.flexView {
		width: 100%;
		height: 100%;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		.scrollView {
			width: 100%;
			height: 100%;
			flex: 1;
			overflow-y: auto;
			overflow-x: hidden;
			position: relative;
			padding-bottom: 116rpx;
			.head-read {
				background: linear-gradient(to right, #ff8440, #ff1e0f);
				background-color: #ff8440;
				padding-bottom: 100rpx;
				.flex {
					display: flex;
					align-items: center;
					padding: 50rpx;
					position: relative;
					.read-img {
						width: 120rpx;
						height: 120rpx;
						border-radius: 100%;
						overflow: hidden;
						margin-right: 20rpx;
						border: 4rpx solid rgba(255, 255, 255, 0.3);
					}
					.flex-box {
						flex: 1;
						min-width: 0;
						font-size: 26rpx;
						color: #333;
						&-text {
							margin: 10rpx 0;
							color: #f5f5f5;
							font-weight: normal;
						}
					}
					.arrow {
						position: relative;
						padding-right: 30rpx;
						span {
							font-size: 28rpx;
							color: white;
						}
						&:after {
							content: ' ';
							display: inline-block;
							height: 12rpx;
							width: 12rpx;
							border-width: 4rpx 4rpx 0 0;
							border-color: #848484;
							border-style: solid;
							transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
							position: relative;
							top: -4rpx;
							position: absolute;
							top: 50%;
							margin-top: -8rpx;
							right: 4rpx;
							border-radius: 2rpx;
						}
					}
					.arrow-one:after {
						border-color: white;
						margin-top: -6rpx;
					}
				}
			}
			.white-box {
				width: 94%;
				background: white;
				border-radius: 10rpx;
				margin: -120rpx auto 20rpx;
				box-shadow: 0 6rpx 20rpx #e7e7e7;
				.tx {
					padding-top: 26rpx;
					overflow: hidden;
					display: flex;
					justify-content: space-between;
					align-content: center;
					&-grid {
						box-sizing: border-box;
						&:first-child {
							margin-left: 40rpx;
						}
						&-comm-sign {
							display: block;
							border-radius: 40rpx 0 0 40rpx;
							font-size: 26rpx;
							padding: 16rpx 44rpx;
							background: linear-gradient(to right, #fef082, #ffc551);
							background-color: #fef082;
							color: #cf4400;
						}
						&-text {
							display: block;
							color: #333;
							font-size: 26rpx;
							white-space: nowrap;
							text-overflow: ellipsis;
							overflow: hidden;
							.title {
								font-size: 26rpx;
								font-weight: normal;
								color: #ff6423;
							}
							.money {
								font-size: 45rpx;
								color: #ff6423;
								letter-spacing: 2rpx;
								margin-bottom: 10rpx;
								&-b {
									font-size: 28rpx;
								}
							}
						}
					}
				}
				.palace {
					padding-bottom: 20rpx;
					overflow: hidden;
					display: flex;
					justify-content: center;
					&-grid {
						flex: 1;
						position: relative;
						box-sizing: border-box;
						&:not(:last-child) {
							&:after {
								width: 1rpx;
								height: 80rpx;
								background: #fddece;
								content: ' ';
								display: inline-block;
								position: absolute;
								top: 0;
								right: 0;
							}
						}
						&-text {
							display: block;
							text-align: center;
							color: #333;
							font-size: 32rpx;
							white-space: nowrap;
							text-overflow: ellipsis;
							overflow: hidden;
							&-name {
								font-size: 26rpx;
								font-weight: normal;
								color: #ff8a4a;
							}
							&-data {
								font-size: 32rpx;
								color: #ff8a4a;
								letter-spacing: 2rpx;
								margin-bottom: 5rpx;
								&-b {
									font-size: 20rpx;
								}
							}
						}
					}
				}
			}
		}
	}
	.list-view {
		position: relative;
		width: 100%;
		overflow: hidden;
	}
	
	.list-item {
		width: 100%;
		padding: 30rpx 28rpx;
		box-sizing: border-box;
		background: #fff;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		border-bottom: 1rpx solid #eaeef1;
	}
	
	.item-last::after {
		left: 0 !important;
	}
	
	.content-box {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
	}
	
	.des-box {
		min-height: 80rpx;
		padding-left: 28rpx;
		box-sizing: border-box;
		vertical-align: top;
		color: #333;
		font-size: 24rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.tit {
		font-size: 32rpx;
		max-width: 420rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.source {
		margin: 12rpx 0;
	}
	.time {
		color: #888;
	}
	
	.money {
		font-size: 38rpx;
		font-weight: 500;
		color: #ff1e0f;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		padding-left: 20rpx;
	}
	
	.less {
		color: #4caf50 !important;
	}
	.tip {
		margin-top: 50rpx;
		display: flex;
		justify-content: center;
		align-content: center;
		font-size: 24rpx;
		color: #888;
	}

</style>
